<template>
	<!-- #ifndef APP-NVUE -->
	<button
		:hover-start-time="Number(hoverStartTime)"
		:hover-stay-time="Number(hoverStayTime)"
		:form-type="formType"
		:open-type="openType"
		:app-parameter="appParameter"
		:hover-stop-propagation="hoverStopPropagation"
		:send-message-title="sendMessageTitle"
		:send-message-path="sendMessagePath"
		:lang="lang"
		:data-name="dataName"
		:session-from="sessionFrom"
		:send-message-img="sendMessageImg"
		:show-message-card="showMessageCard"
		@getphonenumber="getphonenumber"
		@getuserinfo="getuserinfo"
		@error="error"
		@opensetting="opensetting"
		@launchapp="launchapp"
		:hover-class="!disabled && !loading ? 'u-button--active' : ''"
		class="u-button u-reset-button"
		:style="[baseColor, $u.addStyle(customStyle)]"
		@tap="clickHandler"
		:class="bemClass"
	>
		<template v-if="loading">
			<u-loading-icon
				:mode="loadingMode"
				:size="loadingSize * 1.15"
				:color="loadingColor"
			></u-loading-icon>
			<text class="u-button__loading-text" :style="[{ fontSize: textSize + 'px' }]">
				{{ loadingText || text }}
			</text>
		</template>
		<template v-else>
			<u-icon
				v-if="icon"
				:name="icon"
				:color="iconColorCom"
				:size="textSize * 1.35"
				:customStyle="{ marginRight: '2px' }"
			></u-icon>
			<slot>
				<text class="u-button__text" :style="[{ fontSize: textSize + 'px' }]">{{ text }}</text>
			</slot>
		</template>
	</button>
	<!-- #endif -->

	<!-- #ifdef APP-NVUE -->
	<view
		:hover-start-time="Number(hoverStartTime)"
		:hover-stay-time="Number(hoverStayTime)"
		class="u-button"
		:hover-class="
			!disabled && !loading && !color && (plain || type === 'info')
				? 'u-button--active--plain'
				: !disabled && !loading && !plain
				? 'u-button--active'
				: ''
		"
		@tap="clickHandler"
		:class="bemClass"
		:style="[baseColor, $u.addStyle(customStyle)]"
	>
		<template v-if="loading">
			<u-loading-icon
				:mode="loadingMode"
				:size="loadingSize * 1.15"
				:color="loadingColor"
			></u-loading-icon>
			<text
				class="u-button__loading-text"
				:style="[nvueTextStyle]"
				:class="[plain && `u-button__text--plain--${type}`]"
			>
				{{ loadingText || text }}
			</text>
		</template>
		<template v-else>
			<u-icon v-if="icon" :name="icon" :color="iconColorCom" :size="textSize * 1.35"></u-icon>
			<text
				class="u-button__text"
				:style="[
					{
						marginLeft: icon ? '2px' : 0
					},
					nvueTextStyle
				]"
				:class="[plain && `u-button__text--plain--${type}`]"
			>
				{{ text }}
			</text>
		</template>
	</view>
	<!-- #endif -->
</template>

<script>
import button from '../../libs/mixin/button.js'
import openType from '../../libs/mixin/openType.js'
import mpMixin from '../../libs/mixin/mpMixin.js'
import mixin from '../../libs/mixin/mixin.js'
import props from './props.js'
/**
 * button 按钮
 * @description Button 按钮
 * @tutorial https://www.uviewui.com/components/button.html
 *
 * @property {Boolean}			hairline				是否显示按钮的细边框 (默认 true )
 * @property {String}			type					按钮的预置样式，info，primary，error，warning，success (默认 'info' )
 * @property {String}			size					按钮尺寸，large，normal，mini （默认 normal）
 * @property {String}			shape					按钮形状，circle（两边为半圆），square（带圆角） （默认 'square' ）
 * @property {Boolean}			plain					按钮是否镂空，背景色透明 （默认 false）
 * @property {Boolean}			disabled				是否禁用 （默认 false）
 * @property {Boolean}			loading					按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈) （默认 false）
 * @property {String | Number}	loadingText				加载中提示文字
 * @property {String}			loadingMode				加载状态图标类型 （默认 'spinner' ）
 * @property {String | Number}	loadingSize				加载图标大小 （默认 15 ）
 * @property {String}			openType				开放能力，具体请看uniapp稳定关于button组件部分说明
 * @property {String}			formType				用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
 * @property {String}			appParameter			打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效）
 * @property {Boolean}			hoverStopPropagation	指定是否阻止本节点的祖先节点出现点击态，微信小程序有效（默认 true ）
 * @property {String}			lang					指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ）
 * @property {String}			sessionFrom				会话来源，openType="contact"时有效
 * @property {String}			sendMessageTitle		会话内消息卡片标题，openType="contact"时有效
 * @property {String}			sendMessagePath			会话内消息卡片点击跳转小程序路径，openType="contact"时有效
 * @property {String}			sendMessageImg			会话内消息卡片图片，openType="contact"时有效
 * @property {Boolean}			showMessageCard			是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效（默认false）
 * @property {String}			dataName				额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
 * @property {String | Number}	throttleTime			节流，一定时间内只能触发一次 （默认 0 )
 * @property {String | Number}	hoverStartTime			按住后多久出现点击态，单位毫秒 （默认 0 )
 * @property {String | Number}	hoverStayTime			手指松开后点击态保留时间，单位毫秒 （默认 200 )
 * @property {String | Number}	text					按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式）
 * @property {String}			icon					按钮图标
 * @property {String}			iconColor				按钮图标颜色
 * @property {String}			color					按钮颜色，支持传入linear-gradient渐变色
 * @property {Object}			customStyle				定义需要用到的外部样式
 *
 * @event {Function}	click			非禁止并且非加载中，才能点击
 * @event {Function}	getphonenumber	open-type="getPhoneNumber"时有效
 * @event {Function}	getuserinfo		用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
 * @event {Function}	error			当使用开放能力时，发生错误的回调
 * @event {Function}	opensetting		在打开授权设置页并关闭后回调
 * @event {Function}	launchapp		打开 APP 成功的回调
 * @example <u-button>月落</u-button>
 */
export default {
	name: 'u-button',
	// #ifdef MP
	mixins: [mpMixin, mixin, button, openType, props],
	// #endif
	// #ifndef MP
	mixins: [mpMixin, mixin, props],
	// #endif
	// #ifndef MP
	emits: ['click', 'getphonenumber', 'getuserinfo', 'error', 'opensetting', 'launchapp'],
	// #endif
	data() {
		return {}
	},
	computed: {
		// 生成bem风格的类名
		bemClass() {
			// this.bem为一个computed变量，在mixin中
			if (!this.color) {
				return this.bem('button', ['type', 'shape', 'size'], ['disabled', 'plain', 'hairline'])
			}
			// 由于nvue的原因，在有color参数时，不需要传入type，否则会生成type相关的类型，影响最终的样式
			return this.bem('button', ['shape', 'size'], ['disabled', 'plain', 'hairline'])
		},
		loadingColor() {
			if (this.plain) {
				// 如果有设置color值，则用color值，否则使用type主题颜色
				return this.color ? this.color : uni.$u.config.color[`u-${this.type}`]
			}
			if (this.type === 'info') {
				return '#c9c9c9'
			}
			return 'rgb(200, 200, 200)'
		},
		iconColorCom() {
			// 如果是镂空状态，设置了color就用color值，否则使用主题颜色，
			// u-icon的color能接受一个主题颜色的值
			if (this.iconColor) return this.iconColor
			if (this.plain) {
				return this.color ? this.color : this.type
			}
			return this.type === 'info' ? '#000000' : '#ffffff'
		},
		baseColor() {
			let style = {}
			if (this.color) {
				// 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
				style.color = this.plain ? this.color : 'white'
				if (!this.plain) {
					// 非镂空，背景色使用自定义的颜色
					style['background-color'] = this.color
				}
				if (this.color.indexOf('gradient') !== -1) {
					// 如果自定义的颜色为渐变色，不显示边框，以及通过backgroundImage设置渐变色
					// weex文档说明可以写borderWidth的形式，为什么这里需要分开写？
					// 因为weex是阿里巴巴为了部门业绩考核而做的你懂的东西，所以需要这么写才有效
					style.borderTopWidth = 0
					style.borderRightWidth = 0
					style.borderBottomWidth = 0
					style.borderLeftWidth = 0
					if (!this.plain) {
						style.backgroundImage = this.color
					}
				} else {
					// 非渐变色，则设置边框相关的属性
					style.borderColor = this.color
					style.borderWidth = '1px'
					style.borderStyle = 'solid'
				}
			}
			return style
		},
		// nvue版本按钮的字体不会继承父组件的颜色，需要对每一个text组件进行单独的设置
		nvueTextStyle() {
			let style = {}
			// 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
			if (this.type === 'info') {
				style.color = '#323233'
			}
			if (this.color) {
				style.color = this.plain ? this.color : 'white'
			}
			style.fontSize = this.textSize + 'px'
			return style
		},
		// 字体大小
		textSize() {
			let fontSize = 14,
				{ size } = this
			if (size === 'large') fontSize = 16
			if (size === 'normal') fontSize = 14
			if (size === 'small') fontSize = 12
			if (size === 'mini') fontSize = 10
			return fontSize
		}
	},
	methods: {
		clickHandler() {
			// 非禁止并且非加载中，才能点击
			if (!this.disabled && !this.loading) {
				// 进行节流控制，每this.throttle毫秒内，只在开始处执行
				uni.$u.throttle(() => {
					this.$emit('click')
				}, this.throttleTime)
			}
		},
		// 下面为对接uniapp官方按钮开放能力事件回调的对接
		getphonenumber(res) {
			this.$emit('getphonenumber', res)
		},
		getuserinfo(res) {
			this.$emit('getuserinfo', res)
		},
		error(res) {
			this.$emit('error', res)
		},
		opensetting(res) {
			this.$emit('opensetting', res)
		},
		launchapp(res) {
			this.$emit('launchapp', res)
		}
	}
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/components.scss';

/* #ifndef APP-NVUE */
@import './vue.scss';
/* #endif */

/* #ifdef APP-NVUE */
@import './nvue.scss';
/* #endif */

$u-button-u-button-height: 40px !default;
$u-button-text-font-size: 15px !default;
$u-button-loading-text-font-size: 15px !default;
$u-button-loading-text-margin-left: 4px !default;
$u-button-large-width: 100% !default;
$u-button-large-height: 50px !default;
$u-button-normal-padding: 0 12px !default;
$u-button-large-padding: 0 15px !default;
$u-button-normal-font-size: 14px !default;
$u-button-small-min-width: 60px !default;
$u-button-small-height: 30px !default;
$u-button-small-padding: 0px 8px !default;
$u-button-mini-padding: 0px 8px !default;
$u-button-small-font-size: 12px !default;
$u-button-mini-height: 22px !default;
$u-button-mini-font-size: 10px !default;
$u-button-mini-min-width: 50px !default;
$u-button-disabled-opacity: 0.5 !default;
$u-button-info-color: #323233 !default;
$u-button-info-background-color: #fff !default;
$u-button-info-border-color: #ebedf0 !default;
$u-button-info-border-width: 1px !default;
$u-button-info-border-style: solid !default;
$u-button-success-color: #fff !default;
$u-button-success-background-color: $u-success !default;
$u-button-success-border-color: $u-button-success-background-color !default;
$u-button-success-border-width: 1px !default;
$u-button-success-border-style: solid !default;
$u-button-primary-color: #fff !default;
$u-button-primary-background-color: $u-primary !default;
$u-button-primary-border-color: $u-button-primary-background-color !default;
$u-button-primary-border-width: 1px !default;
$u-button-primary-border-style: solid !default;
$u-button-error-color: #fff !default;
$u-button-error-background-color: $u-error !default;
$u-button-error-border-color: $u-button-error-background-color !default;
$u-button-error-border-width: 1px !default;
$u-button-error-border-style: solid !default;
$u-button-warning-color: #fff !default;
$u-button-warning-background-color: $u-warning !default;
$u-button-warning-border-color: $u-button-warning-background-color !default;
$u-button-warning-border-width: 1px !default;
$u-button-warning-border-style: solid !default;
$u-button-block-width: 100% !default;
$u-button-circle-border-top-right-radius: 100px !default;
$u-button-circle-border-top-left-radius: 100px !default;
$u-button-circle-border-bottom-left-radius: 100px !default;
$u-button-circle-border-bottom-right-radius: 100px !default;
$u-button-square-border-top-right-radius: 3px !default;
$u-button-square-border-top-left-radius: 3px !default;
$u-button-square-border-bottom-left-radius: 3px !default;
$u-button-square-border-bottom-right-radius: 3px !default;
$u-button-icon-min-width: 1em !default;
$u-button-plain-background-color: #fff !default;
$u-button-hairline-border-width: 0.5px !default;

.u-button {
	height: $u-button-u-button-height;
	position: relative;
	align-items: center;
	justify-content: center;
	@include flex;
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	/* #endif */
	flex-direction: row;

	&__text {
		font-size: $u-button-text-font-size;
	}

	&__loading-text {
		font-size: $u-button-loading-text-font-size;
		margin-left: $u-button-loading-text-margin-left;
	}

	&--large {
		/* #ifndef APP-NVUE */
		width: $u-button-large-width;
		/* #endif */
		height: $u-button-large-height;
		padding: $u-button-large-padding;
	}

	&--normal {
		padding: $u-button-normal-padding;
		font-size: $u-button-normal-font-size;
	}

	&--small {
		/* #ifndef APP-NVUE */
		min-width: $u-button-small-min-width;
		/* #endif */
		height: $u-button-small-height;
		padding: $u-button-small-padding;
		font-size: $u-button-small-font-size;
	}

	&--mini {
		height: $u-button-mini-height;
		font-size: $u-button-mini-font-size;
		/* #ifndef APP-NVUE */
		min-width: $u-button-mini-min-width;
		/* #endif */
		padding: $u-button-mini-padding;
	}

	&--disabled {
		opacity: $u-button-disabled-opacity;
	}

	&--info {
		color: $u-button-info-color;
		background-color: $u-button-info-background-color;
		border-color: $u-button-info-border-color;
		border-width: $u-button-info-border-width;
		border-style: $u-button-info-border-style;
	}

	&--success {
		color: $u-button-success-color;
		background-color: $u-button-success-background-color;
		border-color: $u-button-success-border-color;
		border-width: $u-button-success-border-width;
		border-style: $u-button-success-border-style;
	}

	&--primary {
		color: $u-button-primary-color;
		background-color: $u-button-primary-background-color;
		border-color: $u-button-primary-border-color;
		border-width: $u-button-primary-border-width;
		border-style: $u-button-primary-border-style;
	}

	&--error {
		color: $u-button-error-color;
		background-color: $u-button-error-background-color;
		border-color: $u-button-error-border-color;
		border-width: $u-button-error-border-width;
		border-style: $u-button-error-border-style;
	}

	&--warning {
		color: $u-button-warning-color;
		background-color: $u-button-warning-background-color;
		border-color: $u-button-warning-border-color;
		border-width: $u-button-warning-border-width;
		border-style: $u-button-warning-border-style;
	}

	&--block {
		@include flex;
		width: $u-button-block-width;
	}

	&--circle {
		border-top-right-radius: $u-button-circle-border-top-right-radius;
		border-top-left-radius: $u-button-circle-border-top-left-radius;
		border-bottom-left-radius: $u-button-circle-border-bottom-left-radius;
		border-bottom-right-radius: $u-button-circle-border-bottom-right-radius;
	}

	&--square {
		border-bottom-left-radius: $u-button-square-border-top-right-radius;
		border-bottom-right-radius: $u-button-square-border-top-left-radius;
		border-top-left-radius: $u-button-square-border-bottom-left-radius;
		border-top-right-radius: $u-button-square-border-bottom-right-radius;
	}

	&__icon {
		/* #ifndef APP-NVUE */
		min-width: $u-button-icon-min-width;
		line-height: inherit !important;
		vertical-align: top;
		/* #endif */
	}

	&--plain {
		background-color: $u-button-plain-background-color;
	}

	&--hairline {
		border-width: $u-button-hairline-border-width !important;
	}
}
</style>
